<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <!-- 第二个el-tabs组件 -->
    <el-tabs v-model="subTabsName1">
      <el-tab-pane label="发票信息" name="invoice">
        <!-- 发票信息表格 -->
        <el-form
          ref="invoiceFormRef"
          :model="invoiceList"
          :rules="invoiceFormRules"
          v-loading="formLoading"
          label-width="0px"
          :inline-message="true"
        >
          <el-table
            :data="invoiceList"
            :stripe="true"
            :show-overflow-tooltip="true"
            class="-mt-10px"
          >
            <el-table-column label="序号" type="index" width="80" align="center" />
            <el-table-column label="发票编号" min-width="150">
              <template #default="{ row, $index }">
                <el-form-item :prop="`${$index}.invoiceNumber`" class="mb-0px!">
                  <el-tooltip :content="row.invoiceNumber" placement="top">
                    <el-input v-model="row.invoiceNumber" disabled />
                  </el-tooltip>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="供应商编号" min-width="150">
              <template #default="{ row, $index }">
                <el-form-item :prop="`${$index}.supplierId`" class="mb-0px!">
                  <el-tooltip :content="row.supplierId" placement="top">
                    <el-input v-model="row.supplierId" disabled />
                  </el-tooltip>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="发票金额" min-width="150">
              <template #default="{ row, $index }">
                <el-form-item :prop="`${$index}.invoiceValue`" class="mb-0px!">
                  <el-tooltip :content="row.invoiceValue" placement="top">
                    <el-input v-model="row.invoiceValue" disabled />
                  </el-tooltip>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="发票图片" min-width="150">
              <template #default="{ row, $index }">
                <el-form-item :prop="`${$index}.fileUrl`" class="mb-0px!">
                  <el-image
                    v-if="row.fileUrl"
                    :src="row.fileUrl"
                    style="width: 100px; height: 100px"
                    :preview-src-list="[row.fileUrl]"
                    fit="cover"
                    :preview-teleported="true"
                  />
                  <span v-else>无图片</span>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="创建时间" min-width="180">
              <template #default="{ row, $index }">
                <el-form-item :prop="`${$index}.createTime`" class="mb-0px!">
                  <el-date-picker v-model="row.createTime" type="date" disabled />
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </el-tab-pane>
    </el-tabs>

    <!-- 第三个el-tabs组件 -->
<el-tabs v-model="subTabsName2">
  <el-tab-pane label="随货同行单信息" name="supplierSendOrder">
    <!-- 随货同行单表格 -->
    <el-form
      ref="supplierSendOrderFormRef"
      :model="supplierSendOrderList"
      v-loading="formLoading"
      label-width="0px"
      :inline-message="true"
    >
      <el-table
        :data="supplierSendOrderList"
        :stripe="true"
        :show-overflow-tooltip="true"
        class="-mt-10px"
      >
        <el-table-column label="序号" type="index" width="80" align="center" />
        <el-table-column label="编号" prop="id" v-if="false" />
        <el-table-column label="随货同行单编号" prop="outOrderId" min-width="150">
          <template #default="{ row, $index }">
            <el-form-item :prop="`${$index}.outOrderId`" class="mb-0px!">
              <el-tooltip :content="row.outOrderId" placement="top">
                <el-input v-model="row.outOrderId" disabled />
              </el-tooltip>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="一级库整合单编号" prop="integrateId" min-width="150" v-if="false">
          <template #default="{ row, $index }">
            <el-form-item :prop="`${$index}.integrateId`" class="mb-0px!">
              <el-tooltip :content="row.integrateId" placement="top">
                <el-input v-model="row.integrateId" disabled />
              </el-tooltip>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="订单编号" prop="purchaseOrderId" min-width="150">
          <template #default="{ row, $index }">
            <el-form-item :prop="`${$index}.purchaseOrderId`" class="mb-0px!">
              <el-tooltip :content="row.purchaseOrderId" placement="top">
                <el-input v-model="row.purchaseOrderId" disabled />
              </el-tooltip>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="供应商编号" prop="supplierId" min-width="150" v-if="false">
          <template #default="{ row, $index }">
            <el-form-item :prop="`${$index}.supplierId`" class="mb-0px!">
              <el-tooltip :content="row.supplierId" placement="top">
                <el-input v-model="row.supplierId" disabled />
              </el-tooltip>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="发货时间" prop="sendTime" min-width="180">
          <template #default="{ row, $index }">
            <el-form-item :prop="`${$index}.sendTime`" class="mb-0px!">
              <el-date-picker v-model="row.sendTime" type="date" disabled :formatter="dateFormatter" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="合计价格(元)" prop="totalPrice" min-width="150">
          <template #default="{ row, $index }">
            <el-form-item :prop="`${$index}.totalPrice`" class="mb-0px!">
              <el-tooltip :content="row.totalPrice" placement="top">
                <el-input v-model="row.totalPrice" disabled />
              </el-tooltip>
            </el-form-item>
          </template>
        </el-table-column>
        <!-- <el-table-column label="打印状态" prop="status" min-width="90">
          <template #default="{ row, $index }">
            <el-form-item :prop="`${$index}.status`" class="mb-0px!">
              <dict-tag :type="DICT_TYPE.ERP_PRINT_STATUS" :value="row.status" />
            </el-form-item>
          </template>
        </el-table-column> -->
        <el-table-column label="备注" prop="remark" min-width="150">
          <template #default="{ row, $index }">
            <el-form-item :prop="`${$index}.remark`" class="mb-0px!">
              <el-tooltip :content="row.remark" placement="top">
                <el-input v-model="row.remark" disabled />
              </el-tooltip>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="流程实例的编号" prop="processInstanceId" min-width="150" v-if="false">
          <template #default="{ row, $index }">
            <el-form-item :prop="`${$index}.processInstanceId`" class="mb-0px!">
              <el-tooltip :content="row.processInstanceId" placement="top">
                <el-input v-model="row.processInstanceId" disabled />
              </el-tooltip>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime" min-width="180" v-if="false">
          <template #default="{ row, $index }">
            <el-form-item :prop="`${$index}.createTime`" class="mb-0px!">
              <el-date-picker v-model="row.createTime" type="date" disabled :formatter="dateFormatter" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="120">
          <template #default="{ row }">
            <el-form-item class="mb-0px!">
              <el-button
                link
                type="primary"
                @click="openForm('update', row.id)"
                v-hasPermi="['erp:supplier-send-order:update']"
              >
                详情
              </el-button>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </el-tab-pane>
</el-tabs>
    <template #footer>
      <!-- <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button> -->
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>

    <!-- 随货同行单表单弹窗：添加/修改 -->
    <supplierSendOrderForm22 ref="SupplierSendFormRef" />
</template>
<script setup lang="ts">
import { WarehouseInListApi, WarehouseInListVO } from '@/api/erp/warehouseinlist'
import {SupplierSendOrderVO,SupplierSendOrderApi} from '@/api/erp/suppliersendorder'
import { InvoiceApi, InvoiceVO } from '@/api/erp/invoice'
import SupplierSendOrderForm22 from './SupplierSendOrderForm22.vue'

/** ERP 入库单表（一二级库） 表单 */
defineOptions({ name: 'WarehouseInListForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const subTabsName1 = ref('invoice')
const subTabsName2 = ref('supplierSendOrder')

const invoiceList = ref<InvoiceVO[]>([]) // 发票列表的数据
const supplierSendOrderList = ref<SupplierSendOrderVO[]>([]) // 供应商列表的数据
const formData = ref({
  id: undefined,
  inId: undefined,
  outDeptId: undefined,
  inDeptId: undefined,
  inTime: undefined,
  status: undefined,
  creator: undefined,
})
const formRules = reactive({
})
const formRef = ref() // 表单 Ref

/** 添加/修改操作 */
const SupplierSendFormRef = ref()
const openForm = (type: string, id?: number) => {
  SupplierSendFormRef.value.open(type, id)
}

/** 打开弹窗 */
const open = async (type: string, inId?: string) => {  
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  // 修改时，设置数据
  if (inId) {
    formLoading.value = true
    try {
      // formData.value = await WarehouseInListApi.getWarehouseInList(id)
      // 根据入库编号 查询随货同行单列表
      supplierSendOrderList.value = await SupplierSendOrderApi.getSupplierSendOrderListByInId(inId)

      // 根据随货同行单的采购单编号 查询发票列表
      const purchaseOrderIds = supplierSendOrderList.value.map(item => item.purchaseOrderId)
      // console.log('111:', purchaseOrderIds)
      invoiceList.value = await InvoiceApi.getInvoiceListByPurchaseOrderIds(purchaseOrderIds)
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
// const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
// const submitForm = async () => {
//   // 校验表单
//   await formRef.value.validate()
//   // 提交请求
//   formLoading.value = true
//   try {
//     const data = formData.value as unknown as WarehouseInListVO
//     if (formType.value === 'create') {
//       await WarehouseInListApi.createWarehouseInList(data)
//       message.success(t('common.createSuccess'))
//     } else {
//       await WarehouseInListApi.updateWarehouseInList(data)
//       message.success(t('common.updateSuccess'))
//     }
//     dialogVisible.value = false
//     // 发送操作成功的事件
//     emit('success')
//   } finally {
//     formLoading.value = false
//   }
// }

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    inId: undefined,
    outDeptId: undefined,
    inDeptId: undefined,
    inTime: undefined,
    status: undefined,
    creator: undefined,
  }
  formRef.value?.resetFields()
}
</script>